<template>
  <el-dialog :title="modal.title" v-model="visible" :width="1100" @close="modalActions.close">
    <div class="search-bar">
      <el-form :label-width="70" inline ref="searchFormRef" :model="searchForm">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="searchForm.userName" clearable />
        </el-form-item>
        <el-form-item label="用户手机" prop="mobile">
          <el-input v-model="searchForm.mobile" clearable />
        </el-form-item>
        <!-- <el-form-item label="SF长工号" prop="longNo">
          <el-input v-model="searchForm.longNo" clearable />
        </el-form-item> -->
        <el-form-item label="机构名称" prop="orgName">
          <el-input v-model="searchForm.orgName" clearable />
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="searchFormActions.search">查询</el-button>
          <el-button @click="searchFormActions.reset(searchFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="table.data"
      class="mb-4"
      v-loading="table.loading"
      row-key="userId"
      @selection-change="tableActions.selectionChange"
      :max-height="500"
    >
      <el-table-column type="selection" fixed />
      <el-table-column prop="username" label="用户名" width="90" />
      <el-table-column prop="userNo" label="编号" />
      <!-- <el-table-column prop="longNo" label="SF长工号" /> -->
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="mobile" label="手机" width="150" />
      <el-table-column prop="orgName" label="机构">
        <template #default="scope">
          {{ scope.row.orgModel?.orgName }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="flex justify-end"
      background
      layout="total, sizes, prev, pager, next"
      :total="pg.total"
      :current-page="pg.current"
      v-model:page-size="pg.pageSize"
      @size-change="pgActions.sizeChange"
      @current-change="pgActions.currentChange"
      :page-sizes="[20, 30, 50]"
    />
    <template #footer>
      <div class="flex justify-end">
        <el-button @click="modalActions.close">取消</el-button>
        <el-button
          type="primary"
          @click="modalActions.submit(searchForm)"
          :loading="state.loading"
          :disabled="table.selected.length == 0"
          >确定</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
  import { ref, reactive, toRefs, watch } from 'vue';
  import { queryAllUserAndSysOrg } from '/@/api/user';
  import { modifyUserIdsByOrgId } from '/@/api/organization';
  import { useMessage } from '/@/hooks/web/useMessage';

  const { createMessage } = useMessage();

  const state = reactive({ loading: false });

  const emit = defineEmits(['success', 'update:visible']);
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    selectedOrgId: {
      type: Number || undefined,
      default: () => undefined,
    },
  });

  const modal = reactive({
    title: '导入用户',
    visible: false,
  });

  const modalActions = {
    close: () => emit('update:visible', false),
    submit: async () => {
      const { selectedOrgId } = toRefs(props) as unknown as any;
      let p = {
        userIds: table.selected.map((e) => e.id),
        orgId: selectedOrgId.value,
      };
      state.loading = true;
      const { code, msg } = await modifyUserIdsByOrgId(p);
      state.loading = false;
      table.selected = [];
      if (code == 200) {
        createMessage({
          message: msg,
        });
        modal.visible = false;
        emit('update:visible', false);
        emit('success');
      }
    },
  };

  // search bar
  const searchFormRef = ref();
  const searchForm = reactive({
    userName: '',
    userNo: '',
    longNo: '',
    mobile: '',
    orgName: '',
  });
  const searchFormActions = {
    search: async () => {
      const { selectedOrgId } = toRefs(props) as unknown as any;
      table.loading = true;
      let p = {
        startIndex: pg.current,
        pageSize: pg.pageSize,
        username: searchForm.userName,
        mobile: searchForm.mobile,
        orgName: searchForm.orgName,
        userNo: '',
        longNo: searchForm.longNo,
        email: '',
        orgNo: '',
        orgId: selectedOrgId.value,
      };
      const { data } = await queryAllUserAndSysOrg(p);
      table.loading = false;
      table.data = data.list;
      pg.total = data.total;
    },
    reset: (formRef) => {
      formRef.resetFields();
      pgActions.reset();
      searchFormActions.search();
    },
  };

  // table
  const table = reactive({
    loading: false,
    data: [],
    selected: [],
  });
  const tableActions = {
    selectionChange(v) {
      table.selected = v;
    },
  };

  const pg = reactive({
    total: 0,
    current: 1,
    pageSize: 20,
  });
  const pgActions = {
    reset() {
      pg.current = 1;
      pg.pageSize = 20;
    },
    currentChange(page) {
      pg.current = page;
      searchFormActions.search();
    },
    sizeChange(r) {
      pg.current = 1;
      pg.pageSize = r;
      searchFormActions.search();
    },
  };

  const { visible } = toRefs(props);
  watch(visible, (nv) => {
    if (nv) searchFormActions.search();
    else {
      searchFormActions.reset(searchFormRef.value);
      pgActions.reset();
    }
  });
</script>
<style lang="less"></style>
